<ui:composition template="../WEB-INF/templates/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:tc="http://java.sun.com/jsf/composite/components">

	<ui:define name="content-title">
		<h:outputLabel>Users</h:outputLabel>
	</ui:define>
		
	<ui:define name="content">		
		<p:panel header="Create new Shop">
			<h:form>
				<p:messages id="message" />
				<p:growl id="growl" sticky="true" showDetail="true"  />
				<p:wizard  widgetVar="shopWidget"   style="font-size:15px">				
					<p:tab title="Shop Details" style="font-size:15px">
						<p:panel header="Shop Information">
								<h:panelGrid columns="2">	
									<p:outputLabel  value="shop Type:"/>					   
									<p:selectOneRadio id="userType" layout="pageDirection">
											<f:selectItem id="manufacturer" itemLabel="Manufacturer" itemValue="Manufacturer"/>
											<f:selectItem id="wholesaler" itemLabel="Wholesaler" itemValue="Wholesaler"/>
											<f:selectItem id="retailer" itemLabel="Retailer" itemValue="Retailer"/>					     	
									</p:selectOneRadio>	
									
									<p:outputLabel value="Shop Name:"/>
									<p:inputText id="lastName" value="#{shopBean.shop.name}" />	
									
									<p:outputLabel value="Shop Description:"/>
									<p:inputTextarea id="description" value="#{shopBean.shop.description}" rows="7"/>		
									
									<p:outputLabel value="Shop Banner:"/>
									<h:panelGrid columns="2">
										<p:fileUpload mode="advanced" update="messages" style="font-size:15px"
																sizeLimit="100000" 
																  allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
										<p:growl id="messages" showDetail="true" />
									</h:panelGrid>							
												
									<p:outputLabel value="Trade Currency:"/>
									<p:selectOneMenu value="#{shopBean.shop.currency}" var="curr" style="width:140px" 
									converter="#{currencyConverter}">
										<f:selectItem itemLabel="" itemValue=""/>
										<f:selectItems value="#{shopBean.currencyList}"  itemValue="#{curr}"/>
										 
										<p:column>
											#{curr.name}
										</p:column>
										
										<p:column>
											<p:graphicImage name="images/currencies/#{curr.sign}.png" width="30"/>
										</p:column>
										
									</p:selectOneMenu>								
									
									<p:outputLabel value="Category:"/>
									<p:selectOneMenu value="#{shopBean.shop.category}" var="cat" style="width:140px"
										converter="#{categoryConverter}">
										<f:selectItem itemLabel="" itemValue=""/>
										<f:selectItems value="#{shopBean.categoryList}"  itemValue="#{cat}"/>
										 
										<p:column>
											#{cat.type}
										</p:column>
										
										<!-- <p:column>
											<p:graphicImage name="images/currencies/#{cat.sign}.png" width="30"/>
										</p:column>
										 -->
									</p:selectOneMenu>
									
									<p:outputLabel value="Location:"/>
									<p:selectOneMenu value="#{shopBean.shop.country}" var="loc" style="width:140px" converter="#{countryConverter}">
										<f:selectItem itemLabel="" itemValue=""/>
										<f:selectItems value="#{shopBean.countryList}"  itemValue="#{loc}"/>
										 
										<p:column>
											#{loc.name}
										</p:column>
										
										<p:column>
											<p:graphicImage name="images/currencies/#{loc.flag}.png" width="30"/>
										</p:column>
										 
									</p:selectOneMenu>																	
								</h:panelGrid>	
							
						</p:panel>	
						<h:outputScript>
								function toggleShippingAddress(checked)
								{
									if (checked)                            
	                       			 {
	                       			 	jQuery("#shippingAddressWrapper").slideUp("slow");
	                       			 }
	                       			 else
	                       			 {
	                       			 	jQuery("#shippingAddressWrapper").slideDown("slow");
	                       			 }
                       			 
                       			 }
							</h:outputScript>			
					</p:tab>
					
					<p:tab title="Shop Administrator">
						<p:panel header="Administrator">
							
								<h:panelGrid columns="2">
									<p:outputLabel value="Firstname:"/>
									<p:inputText id="adminfirstname" value="#{shopBean.shop.keeper.firstname}" />
									
									<p:outputLabel value="Lastname:"/>
									<p:inputText id="adminlastname" value="#{shopBean.shop.keeper.firstname}" />
									
									<p:outputLabel value="Username:"/>
									<p:inputText id="adminusertname" value="#{shopBean.shop.keeper.firstname}" />
									
									<p:outputLabel value="Password:"/>
									<p:password id="adsminpassword" value="#{shopBean.shop.keeper.firstname}"/>
									
									<p:outputLabel value="Repeat Password:"/>
									<p:password id="adsminpasswordRepeat" value="#{shopBean.shop.keeper.firstname}"/>
									
									<p:outputLabel value="Email"/>
									<p:inputText id="adsminEmail" value="#{shopBean.shop.keeper.firstname}"/>		
																		
								</h:panelGrid>	
						</p:panel>				
					</p:tab>
					
					
					<p:tab title="Shop Address">
						<p:panel header="Billing Address">
						   <h:panelGrid columns="2">	
								<p:outputLabel value="Street:"/>
								<p:inputText  value="#{shopBean.shop.billingAddress.street}"/>
								
								<p:outputLabel value="Postal Code:"/>
								<p:inputText  value="#{shopBean.shop.billingAddress.postalCode}"/>
								
								<p:outputLabel value="City"/>
								<p:inputText  value="#{shopBean.shop.billingAddress.city}"/>
								
								<p:outputLabel value="State"/>
								<p:inputText  value="#{shopBean.shop.billingAddress.state}"/>
								
								<p:outputLabel value="Country"/>
								<p:selectOneMenu value="#{shopBean.shop.billingAddress.country}" var="loc" style="width:140px" converter="#{countryConverter}">
										<f:selectItem itemLabel="" itemValue=""/>
										<f:selectItems value="#{shopBean.countryList}"  itemValue="#{loc}"/>
										 
										<p:column>
											#{loc.name}
										</p:column>
										
										<p:column>
											<p:graphicImage name="images/currencies/#{loc.flag}.png" width="30"/>
										</p:column>
										 
									</p:selectOneMenu>
								
								<p:outputLabel value="Same as Shipping Address"/>		
							    <p:selectBooleanCheckbox id="sameAddress" value="#{shopBean.sameAddress}" 
							                    onchange="toggleShippingAddress(this.checked)" />	
							</h:panelGrid>
						</p:panel>
						<div id="shippingAddressWrapper">
							<p:panel header="Shipping Address">
								<h:panelGrid columns="2">
									<p:outputLabel value="Street:"/>
									<p:inputText  value="#{shopBean.shop.shippingAddress.street}"/>
									
									<p:outputLabel value="Postal Code:"/>
									<p:inputText  value="#{shopBean.shop.shippingAddress.postalCode}"/>
									
									<p:outputLabel value="City"/>
									<p:inputText  value="#{shopBean.shop.shippingAddress.city}"/>
									
									<p:outputLabel value="State"/>
									<p:inputText  value="#{shopBean.shop.shippingAddress.state}"/>
									
									<p:outputLabel value="Country"/>
									<p:selectOneMenu value="#{shopBean.shop.shippingAddress.country}" var="loc" style="width:140px" converter="#{countryConverter}">
										<f:selectItem itemLabel="" itemValue=""/>
										<f:selectItems value="#{shopBean.countryList}"  itemValue="#{loc}"/>
										 
										<p:column>
											#{loc.name}
										</p:column>
										
										<p:column>
											<p:graphicImage name="images/currencies/#{loc.flag}.png" width="30"/>
										</p:column>
										 
									</p:selectOneMenu>
								</h:panelGrid>
							</p:panel>
						</div>
					</p:tab>
					<p:tab title="Billing Information">
						<p:panel header="Billing Information">						
							<p:fieldset legend="Direct Bank Transfer" style="margin-top:5px">
								<h:panelGrid columns="2">
									<p:outputLabel value="Direct Bank Transfer:"/>
									<p:selectBooleanCheckbox value="#{shopBean.shop.bankTransfer}" />
									
									<p:outputLabel value="Account Number:"/>
									<p:inputText value="#{shopBean.shop.account.accountNumber}" />
									
									<p:outputLabel value="Bank Number:"/>
									<p:inputText value="#{shopBean.shop.account.bankNumber}" />
									
									<p:outputLabel value="Account Holder:"/>
									<p:inputText value="#{shopBean.shop.account.accountHolder}" />
									
									<p:outputLabel value="Bank Name:"/>
									<p:inputText value="#{shopBean.shop.account.bank}" />
									
									<p:outputLabel value="Default Payment:"/>
									<p:selectBooleanCheckbox value="#{shopBean.shop.account.isDefaultAccount}" />
								</h:panelGrid>
							</p:fieldset>
							<p:fieldset legend="PayPal" style="margin-top:5px">
								<h:panelGrid columns="2">
									<p:outputLabel value="PayPal:" style="margin-left:55px"/>
									<p:selectBooleanCheckbox value="#{shopBean.shop.payPal}" />								
								</h:panelGrid>
							</p:fieldset>
							<p:fieldset legend="Credit Card" style="margin-top:5px">
								<h:panelGrid columns="2">									
									<p:outputLabel value="Credit Card:" style="margin-left:30px"/>
									<p:selectBooleanCheckbox value="#{shopBean.shop.creditCard}" />
								</h:panelGrid>
							</p:fieldset>
							<p:commandButton value="Submit" update="growl,message" actionListener="#{shopBean.createShop}" 
										style="margin-top:5px; margin-left:765px"/>
						</p:panel>
																			
						
					</p:tab>
				</p:wizard>
			</h:form>
		</p:panel>
	</ui:define>
	
</ui:composition>